<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDoctorhome } from '@/apis/apis.js'
import PopUps from '@/components/PopUps.vue'
import { usePopupStore } from '@/store/index.js'
const popupStore = usePopupStore()
const id = ref('')
const data = ref([])
const handleOpenPopup = (time, week) => {
  if (time.already >= time.nu_source) return
  popupStore.updateTime(time.the_time)
  popupStore.updateShow(true)
  popupStore.updateWeek(week)
  popupStore.updateWhen(time.when)
  popupStore.updateId(id.value)
}
onLoad((option) => {
  id.value = option.id
})
onMounted(async () => {
  const res = await getDoctorhome({
    _id: id.value
  })
  console.log(res)
  data.value = res.data
})
</script>

<template>
  <view class="view" v-for="(item, index) in data" :key="index">
    <view class="view-doctor">
      <view class="view-doctor-top">
        <image class="view-doctor-left" :src="item.avatar" mode="aspectFill"></image>
        <view class="view-doctor-right">
          <view class="view-doctor-right-top">
            <view class="view-doctor-right-top-name">{{ item.name }}</view>
            <view class="view-doctor-right-top-post">{{ item.post }}</view>
          </view>
          <view class="view-doctor-right-bottom">{{ item.hospital }}</view>
        </view>
      </view>
      <view class="view-doctor-bottom">{{ item.good_at }}</view>
    </view>
    <view class="view-timesheet">
      <view class="view-timesheet-title">预约挂号</view>
      <scroll-view class="view-timesheet-content" scroll-x enable-flex>
        <view class="view-timesheet-content-left">
          <view class="view-timesheet-content-left-item">日期</view>
          <view class="view-timesheet-content-left-item">上午</view>
          <view class="view-timesheet-content-left-item">下午</view>
        </view>
        <view class="view-timesheet-content-right" v-for="(appment, appmentIndex) in item.App_ment" :key="appmentIndex">
          <view class="view-timesheet-content-right-time">
            <view class="view-timesheet-content-right-week">{{ appment.day }}</view>
            <view class="view-timesheet-content-right-date">{{ appment.week }}</view>
          </view>
          <view class="view-timesheet-content-right-item" :class="{ active: appment.time[0].already < appment.time[0].nu_source }" @click="handleOpenPopup(appment.time[0], appment.week)">{{ appment.time[0].already < appment.time[0].nu_source ? '预约' : '' }}</view>
          <view class="view-timesheet-content-right-item" :class="{ active: appment.time[1].already < appment.time[1].nu_source }" @click="handleOpenPopup(appment.time[1], appment.week)">{{ appment.time[1].already < appment.time[1].nu_source ? '预约' : '' }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="view-tips">
      <view class="view-tips-title">重要提示：</view>
      <view class="view-tip">1.本次预约就诊当天不可取消预约，如需取消，请在就诊前一天的24:00之前操作，累计取消或爽约三次可能会被列入医院黑名单，请按需预约</view>
      <view class="view-tip">2.预约挂号暂不支持医保支付，若本次挂号使用手机在线支付，就诊过程中的门诊检验检查，处方费用可能不支持医保支付</view>
    </view>
  </view>
  <PopUps />
</template>

<style scoped lang="scss">
.view {
  padding-top: 20rpx;
  min-height: 100vh;
  background: linear-gradient(to bottom, #d6e8ff, #fff);
  .view-doctor {
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .view-doctor-top {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .view-doctor-left {
        margin-right: 20rpx;
        width: 150rpx;
        height: 150rpx;
      }
      .view-doctor-right {
        .view-doctor-right-top {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          .view-doctor-right-top-name {
            margin-right: 20rpx;
            font-weight: bold;
          }
          .view-doctor-right-top-post {
            font-size: 28rpx;
          }
        }
        .view-doctor-right-bottom {
          font-size: 28rpx;
        }
      }
    }
    .view-doctor-bottom {
      font-size: 28rpx;
    }
  }
  .view-timesheet {
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .view-timesheet-title {
      margin-bottom: 20rpx;
    }
    .view-timesheet-content {
      display: flex;
      width: 670rpx;
      height: 360rpx;
      font-size: 28rpx;
      white-space: nowrap;
      .view-timesheet-content-left {
        .view-timesheet-content-left-item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 75rpx;
          height: 120rpx;
          border: 1px solid #eee;
        }
      }
      .view-timesheet-content-right {
        .view-timesheet-content-right-time {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 120rpx;
          height: 120rpx;
          border: 1px solid #eee;
          .view-timesheet-content-right-week {
            color: #666;
          }
        }
        .view-timesheet-content-right-item {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120rpx;
          height: 120rpx;
          border: 1px solid #eee;
          &.active {
            background-color: #2c76fb;
            color: #fff;
          }
        }
      }
    }
  }
  .view-tips {
    margin: 0 20rpx 20rpx;
    color: #666;
    font-size: 24rpx;
    .view-tips-title {
      margin-bottom: 20rpx;
    }
    .view-tip {
      margin-bottom: 20rpx;
    }
  }
}
</style>
